<template>
    <div class="flex flex-col min-h-screen">
      <header class="border-b">
        <div class="container mx-auto px-4 py-4 flex items-center justify-between">
          <router-link to="/" class="text-2xl font-bold text-primary">
            招聘平台
          </router-link>
          <nav class="hidden md:flex space-x-6">
            <router-link to="/jobs" class="text-muted-foreground hover:text-primary transition-colors">
              找工作
            </router-link>
            <router-link to="/companies" class="text-muted-foreground hover:text-primary transition-colors">
              公司
            </router-link>
            <router-link to="/salary" class="text-muted-foreground hover:text-primary transition-colors">
              薪资
            </router-link>
          </nav>
          <div class="flex items-center space-x-4">
            <button class="p-2 text-muted-foreground hover:text-primary transition-colors">
              <Bell class="h-5 w-5" />
            </button>
            <button class="p-2 text-muted-foreground hover:text-primary transition-colors">
              <User class="h-5 w-5" />
            </button>
            <button class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-dark transition-colors">
              发布职位
            </button>
          </div>
        </div>
      </header>
  
      <main class="flex-grow">
        <section class="bg-gradient-to-r from-primary to-primary-dark text-white py-16 md:py-24">
          <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">找到你理想的工作</h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">
              浏览数千个职位，找到最适合你的机会
            </p>
            <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
              <input
                type="text"
                placeholder="职位、公司或关键词"
                class="flex-grow px-4 py-3 rounded-lg border-2 border-white bg-white bg-opacity-20 text-white placeholder-white placeholder-opacity-75 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition-all"
              />
              <select
                class="px-4 py-3 rounded-lg border-2 border-white bg-white bg-opacity-20 text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition-all"
              >
                <option value="" disabled selected>选择城市</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
              </select>
              <button class="bg-white text-primary px-6 py-3 rounded-lg hover:bg-opacity-90 transition-colors flex items-center justify-center font-semibold">
                <Search class="mr-2 h-5 w-5" /> 搜索
              </button>
            </div>
          </div>
        </section>
  
        <section class="py-16">
          <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold mb-8 text-center">热门职位</h2>
            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              <div
                v-for="job in 6"
                :key="job"
                class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
              >
                <div class="p-6">
                  <div class="flex justify-between items-start mb-4">
                    <div>
                      <h3 class="font-semibold text-lg mb-1">高级前端工程师</h3>
                      <p class="text-muted-foreground">科技公司 {{ job }}</p>
                    </div>
                    <span class="text-green-600 font-semibold">¥25K-35K</span>
                  </div>
                  <div class="flex items-center text-sm text-muted-foreground mb-4">
                    <MapPin class="mr-2 h-4 w-4" />
                    北京
                    <Briefcase class="ml-4 mr-2 h-4 w-4" />
                    3-5年经验
                    <Building class="ml-4 mr-2 h-4 w-4" />
                    500-1000人
                  </div>
                  <div class="flex flex-wrap gap-2">
                    <span
                      v-for="tag in ['React', 'TypeScript', 'Node.js']"
                      :key="tag"
                      class="bg-muted text-muted-foreground text-xs px-2 py-1 rounded"
                    >
                      {{ tag }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center mt-12">
              <button class="border-2 border-primary text-primary px-6 py-3 rounded-lg hover:bg-primary hover:text-white transition-colors font-semibold">
                查看更多职位
              </button>
            </div>
          </div>
        </section>
      </main>
  
      <footer class="bg-gray-100 py-12">
        <div class="container mx-auto px-4">
          <div class="grid gap-8 md:grid-cols-4">
            <div v-for="(section, index) in footerSections" :key="index">
              <h3 class="font-semibold text-lg mb-4">{{ section.title }}</h3>
              <ul class="space-y-2">
                <li v-for="(link, linkIndex) in section.links" :key="linkIndex">
                  <router-link
                    :to="link.url"
                    class="text-muted-foreground hover:text-primary transition-colors"
                  >
                    {{ link.text }}
                  </router-link>
                </li>
              </ul>
            </div>
            <div>
              <h3 class="font-semibold text-lg mb-4">关注我们</h3>
              <div class="flex space-x-4">
                <a
                  v-for="(icon, index) in socialIcons"
                  :key="index"
                  href="#"
                  class="text-muted-foreground hover:text-primary transition-colors"
                >
                  <component :is="icon" class="h-6 w-6" />
                </a>
              </div>
            </div>
          </div>
          <div class="mt-12 pt-8 border-t text-center text-muted-foreground">
            <p>&copy; 2024 招聘平台. 保留所有权利。</p>
          </div>
        </div>
      </footer>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { Bell, User, Search, MapPin, Briefcase, Building, Facebook, Twitter, Linkedin } from 'lucide-vue-next'
  
  const footerSections = ref([
    {
      title: '关于我们',
      links: [
        { text: '公司介绍', url: '#' },
        { text: '联系我们', url: '#' },
        { text: '加入我们', url: '#' },
      ],
    },
    {
      title: '求职者',
      links: [
        { text: '注册', url: '#' },
        { text: '登录', url: '#' },
        { text: '求职技巧', url: '#' },
      ],
    },
    {
      title: '雇主',
      links: [
        { text: '发布职位', url: '#' },
        { text: '人才搜索', url: '#' },
        { text: '招聘解决方案', url: '#' },
      ],
    },
  ])
  
  const socialIcons = [Facebook, Twitter, Linkedin]
  </script>
  
  <style scoped>
  /* 添加任何额外的组件特定样式 */
  .container {
    max-width: 1200px;
  }
  
  @media (min-width: 1024px) {
    .container {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }
  
  /* 添加平滑滚动效果 */
  html {
    scroll-behavior: smooth;
  }
  
  /* 优化表单元素在Webkit浏览器中的外观 */
  input, select, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  /* 添加悬停效果 */
  .hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  </style>